import React from "react";
import './default.css'
import Header from "../header";
import Footer from "../footer";

import {Switch, Route, Redirect} from 'react-router-dom'
import Home from "../../pages/home";
import Follow from "../../pages/follow";
import Column from "../../pages/column";
import User from "../../pages/user";
import Login from "../../pages/login";
import Reg from "../../pages/reg";
import NoPage from "../../pages/no-page";
import Auth from "../../guard/auth";
import Detail from "../../pages/detail";
import Loading from "../../components/loading/loading";
import pubsub from 'pubsub-js';

export default class Default extends React.Component{
    state={
        bNav:true,
        bFoot:true,
        bLoading: false
    };
    constructor(){
        super();

        //订阅
        this.pubsubId = pubsub.subscribe('view_loader',(mess,bl)=>{
            this.setState({bLoading:bl})
        });
    }

    static getDerivedStateFromProps(nextProps,nextState){
        //路由监听|路由观测
        let path = nextProps.location.pathname;

        if (/home|follow|column/.test(path)){
            return {
                bNav:true,
                bFoot:true
            }
        }

        if (/login|reg|detail/.test(path)){
            return {
                bNav:false,
                bFoot:false
            }
        }

        if (/user/.test(path)){
            return {
                bNav:false,
                bFoot:true
            }
        }

        return null;


    }

    render(){
        let {bNav,bFoot,bLoading} = this.state;
        return (
            <div>
                {bLoading && <Loading/>}
                { bNav && <Header/>}
                <Switch>
                    <Route path="/home" component={Home} />
                    <Route path="/follow" component={Follow} />
                    <Route path="/column" component={Column} />
                    <Auth path="/user" component={User} />
                    <Route path="/login" component={Login} />
                    <Route path="/reg" component={Reg} />
                    <Route path="/detail/:id" component={Detail} />
                    <Redirect exact from="/" to="/home" />
                    <Route component={NoPage} />
                </Switch>
                { bFoot && <Footer/>}
            </div>
        )
    }
}